<template>
  <div class="app-container">
    <div style="display: flex">
      <div style="display: flex;flex: 1;flex-direction: column">
        <el-form ref="formOutin">
          <el-form-item label="资产标签">
            <el-input v-model="returnData.label" placeholder="请输入资产标签" />
          </el-form-item>
          <el-form-item v-if="returnData.address" label="选择归还位置">
            <el-select v-model="returnData.status" placeholder="请选择归还位置" clearable size="small">
              <el-option
                v-for="dict in assetStatus"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="归还备注">
            <el-input v-model="returnData.checkin_notes" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="returnClick()">归还</el-button>
        </div>
      </div>
      <div style="flex: 1;background: #fff;margin-left: 30px">
        归还状态 (0 资产已归还)
        <el-table v-loading="loading" :data="assetListStatus" style="margin-top: 30px">
          <el-table-column width="300" label="资产标签" align="left" prop="assetTag"></el-table-column>
          <el-table-column width="300" label="归还状态" align="left" prop="status">
            <template slot-scope="scope">
              <div v-if="scope.row.status === 1">归还成功</div>
              <div v-if="scope.row.status === 0">归还失败 原因：资产不存在或者已经被归还</div>
            </template>
          </el-table-column>
          <el-table-column width="300" label="状态码" align="left" prop="status"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { CheckinProd } from "@/api/vadmin/basic/base";

export default {
  name: "QuickScan",
  components: {},
  data() {
    return {
      loading: false,
      returnData: {
        label: "",
        address: "",
        checkin_notes: ""
      },
      assetListStatus: []
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    returnClick() {
      if (this.returnData.label) {
        // 通过资产标签查到对应的资产获取id 再去快速归还
        this.getAssetsList(this.returnData.label);
      } else {
        this.$message.error("归还标签不能为空");
      }
    },
    getAssetsList(assetsName) {
      this.loading = true;
      var rq = { asset_tag: assetsName, asset_type: "asset", notes: this.returnData.checkin_notes, qty: "1" };
      CheckinProd(rq).then(res => {
        this.loading = false;
        this.$message({
          message: "归还成功",
          type: "success"
        });
        this.assetListStatus.push({
          assetTag: assetsName,
          status: 1
        });
      }, err => {
        this.loading = false;
        this.assetListStatus.push({
          assetTag: assetsName,
          status: 0
        });
      });
    }
  }
};
</script>
<style>
</style>
